<template>
	<view :style="{height:windowHeight+'px'}" class="content">
		<uni-nav-bar  :fixed="true" shadow  status-bar left-icon="left" left-text="返回" title="用车登记" @clickLeft="back" />
		<view>
			<uni-forms ref="baseForm" :modelValue="baseFormData"  style="padding: 0.5rem;" label-width='90px'>
				<view style="padding: 0.5rem;" >
					<uni-forms-item label="姓名" required>
						<uni-easyinput v-model="baseFormData.latlog" placeholder="请输入使用者姓名" />
					</uni-forms-item>
					<uni-forms-item label="可用车辆"  required>
						<uni-combox :candidates="candidates" placeholder="请选择可用车辆" v-model="baseFormData.city"></uni-combox>
					</uni-forms-item>
					<uni-forms-item label="所属部门" required>
						<uni-combox :candidates="depts" placeholder="请选择所属部门" v-model="baseFormData.dept"></uni-combox>
					</uni-forms-item>
					<uni-forms-item label="出发地点" required>
						<uni-easyinput v-model="baseFormData.latlog" placeholder="请输入出发地点" />
					</uni-forms-item>
					 <!-- 新增途径地点按钮 -->
					<uni-forms-item label="途径地点" required>
						<button class="mini-btn" type="default" size="mini" @click="addRow">新增途径地点</button>
					</uni-forms-item>
					<uni-forms-item v-for="(item, index) in waypoints" :key="index"  :label="'途径地点 ' + (index + 1)" required>
					  <view style="display: flex; align-items: center;">
						<uni-easyinput v-model="item.latlog" placeholder="请输入途径地点" />
						<button class="mini-btn ml5" type="default" size="mini" @click="removeRow(index)">-</button>
					  </view>
					</uni-forms-item>
					<uni-forms-item label="目的地点" required>
						<uni-easyinput v-model="baseFormData.latlog" placeholder="请输入目的地点" />
					</uni-forms-item>
					
					
					<uni-forms-item label="出发时间" required>
						<uni-datetime-picker v-model="baseFormData.rangeS" type="datetime"  />
					</uni-forms-item>
					<uni-forms-item label="到达时间" required>
						<uni-datetime-picker v-model="baseFormData.rangeE" type="datetime"  />
					</uni-forms-item>
					<uni-forms-item label="用车事由" required>
						<uni-easyinput v-model="baseFormData.introduction" type="textarea" placeholder="请在此描述用车事由…" />
					</uni-forms-item>
				</view>
				<view style="height: 50px;"></view>
			</uni-forms>
		</view>
		<view class="btnStyle">
			<view class="btnDiv">
				<button type="primary" plain="true">提交</button>
				<button plain="true">取消</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				windowHeight: 700,
				imgList: [],
				 waypoints: [], // 存储途径地点表单项的数据
			// 基础表单数据
				baseFormData: {
					name: '',
					age: '',
					introduction: '',
					sex: 2,
					hobby: 0,
					datetimesingle: 1627529992399,
					latlog:'',
					city: '',
					dept:'',
					rangeS:'',
					rangeE:''
				},
				candidates: ['车辆1', '车辆2', '车辆3'],
				depts: ['部门1', '部门2', '部门3'],
								
	
		
			}
		},
		onLoad() {
			const sysInfo = uni.getSystemInfoSync();
			this.windowHeight = sysInfo.windowHeight;
			 
		},
		computed: {
			// 使用计算属性将 menuList 数据分割成每个 swiper-item 中的子数组
		
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			 addRow() {
			      this.waypoints.push({ latlog: '' }); // 新增一个空的途径地点数据
			    },
			removeRow(index) {
			  this.waypoints.splice(index, 1); // 删除对应索引的途径地点数据
			}
		
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.btnStyle{
			position: fixed;bottom: 0rem;width: 100%;display: flex;    align-items: center;padding: 1rem 0;
			justify-content: center;
			background-color: white;
			.btnDiv{
				width: 80%;
				display: flex;
				button{
					flex: 1;
					grid-column: 1;
					margin: 0 5px;
				}
			}
		}
		.ml5{
			display: inline-block;margin-left: 1rem;
		}
		
	}
</style>
